<template>
  <el-container>
<el-header>
  <div id="title">课程班级</div>
              <div><i class="el-icon-search" id="icon" ></i></div>
              <el-input v-model="input" placeholder="搜索课程" id="input"></el-input>
              <div id="jia">加入班级</div>
              <div id="tong">通知</div>
              <div><i class="el-icon-user-solid" id="icon1" @click="handleicon"></i></div>
</el-header>
<el-main style="background-color: white;">
  <div id="T1">{{ this.name }}</div>
  <div id="T2">
          <el-button type="primary" round v-if="this.type=='提交中'">提交中</el-button>
          <el-button type="success" round v-if="this.type=='补交中'">补交中</el-button>
          <el-button type="danger" round v-if="this.type=='已截至'">已截至</el-button>
  </div>
  <div id="T3" @click="NeiRong">作业内容</div>
  <div id="T4">老师评价</div>
  <div id="T5">{{ assessment }}</div>
  <div id="T6">
    <el-input v-model="grade" placeholder="打分" style="width: 60px;"></el-input>
  </div>
  <el-button type="primary" id="T7" @click="submit">提交评分</el-button>
</el-main>
</el-container>
</template>
<style>
#T7{
  position:absolute;
  top: 86.2%;
  left:75%;
}
#T6{
  position: absolute;
  top: 78%;
  left: 70%;
}
#T5{
      border: 1px solid;
      height: 40%;
      width: 70%;
      position: absolute;
      left: 15%;
      top: 43%;
      padding: 5px;
      text-align: left;
  }
#T4{
      border: 1px solid black;
      background-color: rgb(135, 237, 237);
      height: 70px;
      width: 140px;
      position: absolute;
      top: 230px;
      left: 15%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: white;
  }
#T3{
      border: 1px solid black;
      background-color: rgb(255,255,255);
      height: 70px;
      width: 140px;
      position: absolute;
      top: 230px;
      left: 5%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
  }
#T2{
      position: absolute;
      top: 15%;
      left: 16%;
  }
#T1{
      font-size: 30px;
      font-weight: 700;
      position: absolute;
      top: 15%;
      left:5%
  }
.grid-cotainer{
  display:grid;
  grid-template-columns: repeat(3,300px);
  grid-gap:50px;
}
.grid-item{
  padding: 20px;
  border:1px solid;
  border-radius: 5px;
}
.el-col {
  border-radius: 4px;
}
.el-row {
  margin-bottom: 20px;
}
.bg-purple-light {
  background: #0c2152;
}
.bg-purple-dark {
  background: #830608;
}
.el-header{
  background-color: rgb(85,85,85);
  color: #333;
  text-align: center;
  line-height: 80px;
}
.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
#title{
  color: #E9EEF3;
  position:absolute;
  top: 0px;
  left:80px;
}
#icon{
  color: white;
  font-size: 25px;
  position: absolute;
  top:30px;
  left:700px;
}
#input{
  height:33px;
  width:230px;
  position: absolute;
  top:-30px;
  left:700px;
}
#jia{
  color: #E9EEF3;
  position:absolute;
  top: 0px;
  left:1000px;
}
#tong{
  color: #E9EEF3;
  position:absolute;
  top: 0px;
  left:1200px;
}
#icon1{
  color: white;
  font-size:40px;
  position: absolute;
  top:20px;
  left: 1350px;
}
</style>
<script>
import axios from 'axios'
export default {
  data(){
      return{
        content:'',
        assessment:'',
        grade:'',
        name:'',
        type:'',
        id:'',
        courseid:'',
        taskid:''
      }
  },
  methods:{
      handleicon(){
        this.$router.push('/StuPage')
      },
      submit(){
        //提交评分
        //传出 id，courseid，taskid，grade-分数 assessment-评价
        //返回 success==true表示提交成功
        axios.post('',{
          id:this.id,//学生id
          courseid:this.courseid,//课程id
          taskid:this.taskid,//任务id
          grade:this.grade,
          assessment:this.assessment
        }).then(res=>{
          if(res.data.success){
            alert('提交成功')
          }
        })
      },
      NeiRong(id){
                this.$router.push({
                    name:'NeiRong',
                    params:{
                        id:id,
                        taskid:this.taskid,
                        courseid:this.courseid
                    }
                })
          },
  },
  mounted(){
          this.id=this.$route.params.id
          this.taskid=this.$route.params.taskid
          this.courseid=this.$route.params.courseid
          //传入传出和NeiRong的一样
          axios.post('http://127.0.0.1:4523/m2/5591894-5270100-default/244515723',{
          id:this.id,
          courseid:this.courseid,
          taskid:this.taskid
        }).then(res=>{
          this.content=res.data.content
          this.assessment=res.data.assessment
          this.grade=res.data.grade
          this.name=res.data.name
          this.type=res.data.type
        })
      }
}
</script>